<script setup lang="ts">
// 组件逻辑
</script>

<template>
  <div id="app">
    <nav class="navbar">
      <div class="container">
        <div class="nav-brand">
          <router-link to="/" class="brand">DayLog</router-link>
        </div>
        <div class="nav-menu">
          <router-link to="/code" class="nav-link">代码笔记</router-link>
          <router-link to="/diary" class="nav-link">日记</router-link>
          <router-link to="/todo" class="nav-link">待办事项</router-link>
        </div>
      </div>
    </nav>
    
    <main class="main-content">
      <div class="container">
        <router-view />
      </div>
    </main>
  </div>
</template>

<style lang="scss" scoped>
.navbar {
  background-color: $secondary-color;
  border-bottom: $border-width solid $border-color;
  padding: $spacing-md 0;
  
  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .nav-brand {
    .brand {
      font-size: $font-size-xl;
      font-weight: bold;
      color: $primary-color;
      text-decoration: none;
    }
  }
  
  .nav-menu {
    display: flex;
    gap: $spacing-lg;
    
    .nav-link {
      color: $text-color;
      text-decoration: none;
      padding: $spacing-sm;
      border-radius: $border-radius;
      transition: all 0.2s ease;
      
      &:hover {
        background-color: $hover-color;
      }
      
      &.router-link-active {
        color: $primary-color;
        font-weight: bold;
      }
    }
  }
  
  @media (max-width: $breakpoint-mobile) {
    .nav-menu {
      gap: $spacing-sm;
      
      .nav-link {
        font-size: $font-size-small;
        padding: $spacing-xs;
      }
    }
  }
}

.main-content {
  flex: 1;
  padding: $spacing-lg 0;
}
</style>
